<template>
  <div class="tool-card" @mouseenter="startAnimation" @mouseleave="stopAnimation" v-auth-click="goToDetail">
    <div class="tool-thumbnail">
      <img :src="thumbnail" :alt="title" class="thumbnail-image">
    </div>
    <div class="tool-info">
      <h3>{{ title }}</h3>
      <p class="description">{{ description }}</p>
      <div class="stats">
        <span class="sales">已售：{{ sales }}</span>
        <span class="last-purchase" v-if="lastPurchaseTime">
          {{ lastPurchaseTime }}分钟前有人购买
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AIToolCard',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    thumbnail: {
      type: String,
      required: true
    },
    sales: {
      type: Number,
      default: 0
    },
    lastPurchaseTime: {
      type: Number,
      default: null
    },
    id: {
      type: [Number, String],
      required: true
    }
  },
  methods: {
    goToDetail() {
      this.$router.push({
        name: 'ToolDetail',
        params: { id: this.id }
      })
    },
    startAnimation() {
      this.$el.style.transform = 'translateY(-5px)';
      this.$el.style.boxShadow = '0 10px 15px rgba(0,0,0,0.1)';
    },
    stopAnimation() {
      this.$el.style.transform = 'translateY(0)';
      this.$el.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
    }
  }
}
</script>

<style scoped>
.tool-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  cursor: pointer;
}

.tool-thumbnail {
  height: 120px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F3F3F3;
  transition: background-color 0.3s ease;
}

.thumbnail-image {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}

.tool-info {
  padding: 1rem;
}

.tool-info h3 {
  color: #333333;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.description {
  color: #666666;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #888888;
}

.sales {
  color: #ff6b6b;
}

.last-purchase {
  color: #20c997;
}

/* 修改悬浮效果 */
.tool-card:hover {
  background-color: #3F5D62;
}

.tool-card:hover .tool-thumbnail {
  background-color: #5c8183;
}

.tool-card:hover .tool-info h3,
.tool-card:hover .description,
.tool-card:hover .stats,
.tool-card:hover .sales,
.tool-card:hover .last-purchase {
  color: #ffffff;
}
</style> 